import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:study_online/global/colors.dart';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body: TestReportPage(),
      ),
    );
  }
}

class TestReportPage extends StatefulWidget {
  TestReportPage(
      {Key key,
      this.trueNum,
      this.ansList,
      this.title,
      this.minute,
      this.second})
      : super(key: key);
  List<int> ansList;
  int trueNum;
  int minute, second;
  String title;

  @override
  _TestReportPageState createState() {
    return _TestReportPageState();
  }
}

class _TestReportPageState extends State<TestReportPage> {
  double _progress;

  @override
  void initState() {
    super.initState();
    setState(() {
      _progress=(1.0*widget.trueNum/widget.ansList.length);
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  Widget _labelWidget(int index) {
    return Container(
      width: ScreenUtil().setWidth(125),
      height: ScreenUtil().setWidth(125),
      decoration: BoxDecoration(
        color: widget.ansList[index] == 0 ? Color(0xB9F44336) : AppColors.green,
        borderRadius:
            BorderRadius.all(Radius.circular(0.5 * ScreenUtil().setWidth(125))),
      ),
      child: Center(
        child: Text(
          (index + 1).toString(),
          style: TextStyle(
              fontSize: ScreenUtil().setSp(60),
              color: Colors.white,
              fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //debugPaintSizeEnabled = true;
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(1080, 2340),
    );
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '练习报告',
          style: TextStyle(
            fontSize: ScreenUtil().setSp(62),
            color: Colors.white,
          ),
        ),
        centerTitle: true,
        elevation: 0,
        backgroundColor: AppColors.primary,
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            //height: ScreenUtil().setHeight(1070),
            //padding: EdgeInsets.only(bottom:ScreenUtil().setHeight(46)),
            color: Color(0xffF8F9FB),
          ),
          Positioned(
            top: 0,
            left: 0,
            child: Column(
              children: [
                Container(
                  width: ScreenUtil().screenWidth,
                  height: ScreenUtil().setHeight(300),
                  color: AppColors.primary,
                ),
                Container(
                  width: ScreenUtil().screenWidth,
                  height: ScreenUtil().setHeight(68),
                  decoration: BoxDecoration(
                    color: AppColors.primary,
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(100),
                        bottomLeft: Radius.circular(100)),
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            top: ScreenUtil().setHeight(60),
            left: ScreenUtil().setWidth(46),
            child: Container(
              width: ScreenUtil().setWidth(977),
              height: ScreenUtil().setHeight(1250) -
                  ScreenUtil().setHeight(60) +
                  ScreenUtil().setWidth(155) *
                      ((widget.ansList.length - 1) ~/ 6),
              padding: EdgeInsets.only(bottom: ScreenUtil().setHeight(50)),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(15),
                    bottomLeft: Radius.circular(15)),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    height: ScreenUtil().setHeight(373),
                    margin: EdgeInsets.only(
                        left: ScreenUtil().setWidth(46),
                        right: ScreenUtil().setWidth(26)),
                    child: Row(
                      children: [
                        Container(
                          width: ScreenUtil().setWidth(616),
                          height: ScreenUtil().setHeight(343),
                          padding: EdgeInsets.only(
                              top: ScreenUtil().setHeight(76),
                              bottom: ScreenUtil().setHeight(104)),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '${widget.title}',
                                style: TextStyle(
                                  fontSize: ScreenUtil().setSp(56),
                                  color: Colors.black,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                '正确率: ${(100.0 * widget.trueNum / widget.ansList.length).toInt()}% | 用时: ${widget.minute}分${widget.second}秒',
                                style: TextStyle(
                                  fontSize: ScreenUtil().setSp(38),
                                  color: AppColors.subtext,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Stack(
                          children: [
                            Center(
                              child: AnimatedContainer(
                                duration: Duration(seconds: 1000),
                                width: ScreenUtil().setWidth(286),
                                height: ScreenUtil().setWidth(286),
                                child: CircularProgressIndicator(
                                  strokeWidth: ScreenUtil().setWidth(15),
                                  value: _progress,
                                  backgroundColor: Color(0xffF8F9FB),
                                  valueColor:
                                      AlwaysStoppedAnimation(AppColors.yellow),
                                ),
                              ),
                            ),
                            Positioned(
                              top: ScreenUtil().setHeight(205),
                              left: ScreenUtil().setWidth(35),
                              child: Text(
                                '答题数/总题数',
                                style: TextStyle(
                                  fontSize: ScreenUtil().setSp(36),
                                  color: AppColors.subtext,
                                ),
                              ),
                            ),
                            Positioned(
                                top: ScreenUtil().setHeight(130),
                                left: ScreenUtil().setWidth(112),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Text(
                                      '${widget.trueNum}',
                                      style: TextStyle(
                                        fontSize: ScreenUtil().setSp(65),
                                        color: AppColors.yellow,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    Text(
                                      '/${widget.ansList.length}',
                                      style: TextStyle(
                                        fontSize: ScreenUtil().setSp(40),
                                        color: AppColors.subtext,
                                      ),
                                    ),
                                  ],
                                )),
                          ],
                        )
                      ],
                    ),
                  ),
                  //Divider(color: AppColors.subtext,),
                  Container(
                    width: ScreenUtil().setWidth(868),
                    height: ScreenUtil().setHeight(390) +
                        ScreenUtil().setWidth(155) *
                            ((widget.ansList.length - 1) ~/ 5),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Align(
                          child: Text(
                            '答题卡',
                            style: TextStyle(
                              fontSize: ScreenUtil().setSp(58),
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          alignment: Alignment.bottomLeft,
                        ),
                        Row(
                          children: [
                            Container(
                              width: ScreenUtil().setWidth(40),
                              height: ScreenUtil().setWidth(40),
                              decoration: BoxDecoration(
                                color: AppColors.green,
                                borderRadius: BorderRadius.all(
                                    Radius.circular(ScreenUtil().setWidth(20))),
                              ),
                            ),
                            SizedBox(width: ScreenUtil().setWidth(16)),
                            Text(
                              '正确',
                              style: TextStyle(
                                fontSize: ScreenUtil().setSp(43),
                                color: AppColors.subtext,
                              ),
                            ),
                            SizedBox(width: ScreenUtil().setWidth(55)),
                            Container(
                              width: ScreenUtil().setWidth(40),
                              height: ScreenUtil().setWidth(40),
                              decoration: BoxDecoration(
                                color: Color(0xB9F44336),
                                borderRadius: BorderRadius.all(
                                    Radius.circular(ScreenUtil().setWidth(20))),
                              ),
                            ),
                            SizedBox(width: ScreenUtil().setWidth(16)),
                            Text(
                              '错误',
                              style: TextStyle(
                                fontSize: ScreenUtil().setSp(43),
                                color: AppColors.subtext,
                              ),
                            ),
                            SizedBox(width: ScreenUtil().setWidth(400)),
                            Text(
                              '共${widget.ansList.length}题',
                              style: TextStyle(
                                fontSize: ScreenUtil().setSp(50),
                                color: AppColors.subtext,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: ScreenUtil().setHeight(10),
                        ),
                        Wrap(
                          spacing: ScreenUtil().setWidth(42),
                          runSpacing: ScreenUtil().setWidth(30),
                          children: widget.ansList
                              .asMap()
                              .keys
                              .map((index) => _labelWidget(index))
                              .toList(),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(40),
                  ),
                  InkWell(
                    onTap: () {
                      Navigator.of(context)..pop()..pop();
                    },
                    child: Container(
                      height: ScreenUtil().setHeight(120),
                      width: ScreenUtil().setWidth(900),
                      decoration: BoxDecoration(
                        color: AppColors.primary,
                        borderRadius: BorderRadius.all(
                            Radius.circular(ScreenUtil().setHeight(60))),
                      ),
                      child: Center(
                        child: Text(
                          '继续练习',
                          style: TextStyle(
                            fontSize: ScreenUtil().setSp(55),
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
